<template>
	<view class="page-publish">
		<!-- 自定义导航 -->
		<cl-topbar title="意见反馈">
			<template slot="append">
				<view class="btn">
					<cl-button type="primary" round :loading="loading" @click="submit"
						>提交</cl-button
					>
				</view>
			</template>
		</cl-topbar>

		<view class="container">
			<cl-form
				ref="form"
				:model="form"
				:rules="rules"
				label-position="top"
				:show-message="false"
			>
				<!-- 文本域 -->
				<cl-form-item>
					<cl-textarea
						height="280rpx"
						v-model="form.content"
						placeholder="请给我们留下您宝贵的意见吧~"
					></cl-textarea>
				</cl-form-item>




			</cl-form>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			type: 0,
			form: {
				content: "",
				urls: [],
				qiniuImageKey: [],
			},
			rules: {
				content: {
					required: true,
					message: "内容不能为空"
				}
			}
		};
	},
	methods: {
		 async submit() {
			// 模拟加载
			this.loading = true;
			
			let param = {
				content: this.form.content,
			}
			
			//发布文章
			let [err, res] = await this.$http.post("Version/advise", param, {checkToken: true});
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			uni.hideLoading();
			uni.showToast({ title: '提交成功'});
			setTimeout(function() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			}, 1000);
			
			this.loading = false;
		},
		onUpload(file) {
			this.form.urls.push(file.path);
			this.$refs["upload"].loading = false;
		}
	}
};
</script>

<style lang="scss">
.page-publish {
	.btn {
		.cl-button {
			background-color: #28b5b5;
			width: 120rpx;
			height: 62rpx;
			margin-right: 14rpx;
		}
	}
	.container {
		padding: 32rpx;
		/deep/.cl-form .cl-form-item__container:first-child {
			padding-left: 0;
		}
		/deep/.cl-upload {
			background-color: #efefef;
		}
		.cl-textarea {
			border: none;
			.uni-textarea-placeholder {
				color: #d6d6d6;
			}
		}
		.cl-list {
			width: 100%;
		}

		.group {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cl-select, cl-select {
				width: 128rpx;
				height: 56rpx;
				border-radius: 29rpx;
				background-color: #f5f7fa;
				/deep/.cl-select__inner {
					width: 128rpx;
					height: 56rpx;
					display: flex;
					align-items: center;
					.cl-select__icon {
						height: 56rpx;
						display: flex;
						align-items: center;
						position: relative;
						right: 30rpx;
					}
				}
				/deep/.cl-select__value {
					color: #6d6d6d;
					font-size: 24rpx;
				}
			}
			.save {
				background-color: #f5f7fa;
				width: 202rpx;
				height: 56rpx;
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				/deep/.cl-checkbox.is-checked .cl-checkbox__input {
					background-color: #6d6d6d;
					border-color: #6d6d6d;
					color: #fff;
				}
				/deep/.cl-checkbox__input text {
					top: -9rpx;
				}
				/deep/.cl-checkbox__input {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
					uni-text {
						top: -10rpx;
					}
				}
			}
		}
	}
}
</style>
